<template>
	<!-- <view class="tabBarBox"> -->

	<view class="tabBar" v-if="userData != undefined">
		<view class="nacativeBox" :class="active == 1 ? 'nacativeBoxTop' : ''" v-if="userData.loginState == 1 || userData.loginState == 3"
			@click.stop="switchTab(1)">
			<view :class="active == 1 ? 'naimgBox' : 'naimgBoxActive'">
				<image style="width: 36rpx; height: 36rpx;" :src="img.home" mode=""></image>
			</view>
			<text class="imgText">设备信息</text>
		</view>
		<view class="nacativeBox" :class="active == 2 ? 'nacativeBoxTop' : ''" v-if="userData.loginState == 1 || userData.loginState == 3"
			@click.stop="switchTab(2)">
			<view :class="active == 2 ? 'naimgBox' : 'naimgBoxActive'">
				<image style="width: 36rpx; height: 36rpx;" :src="img.classification" mode=""></image>
			</view>
			<text class="imgText">缺货提醒</text>
		</view>
		<view class="nacativeBox" :class="active == 3 ? 'nacativeBoxTop' : ''" v-if="userData.loginState == 1 || userData.loginState == 3"
			@click.stop="switchTab(3)">
			<view :class="active == 3 ? 'naimgBox' : 'naimgBoxTherr'" >
				<image style="width: 48rpx; height: 48rpx;" :src="img.order" mode=""></image>
			</view>
			<text class="imgText">高级功能</text>
		</view>
		<view class="nacativeBox" :class="active == 4 ? 'nacativeBoxTop' : ''" v-if="userData.loginState == 2 || userData.loginState == 3"
			@click.stop="switchTab(4)">
			<view :class="active == 4 ? 'naimgBox' : 'naimgBoxActive'" >
				<image style="width: 36rpx; height: 36rpx;" :src="img.mine" mode=""></image>
			</view>
			<text class="imgText">账单信息</text>
		</view>

	</view>
	<!-- </view> -->
</template>

<script>
	export default {
		data() {
			return {
				img: {
					home: "/static/image/message.png",
					homed: "/static/image/messages.png",
					classification:"/static/image/remind.png",
					classificationed: "/static/image/reminds.png",
					order: "/static/image/set.png",
					ordered: "/static/image/sets.png",
					mine: "/static/image/bill.png",
					mined: "/static/image/bills.png",
				},
				active: this.current,
				userData: {}
			};
		},
		props: {
			current: {
				type: [Number, String],
				default: 1
			},
		},
		created() {
			this.userData = uni.getStorageSync('userData');
			console.log(this.userData)
		},
		methods: {
			//获取当前页面路由
			getCurrentRoute() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				return currentPage.route;
			},

			switchTab(index) {
				const pages = this.getCurrentRoute();
				if (index === 1) {
					if (pages === 'pages/index/index') return;
					uni.redirectTo({
						url: '../index/index',
					});
				}
				if (index === 2) {
					if (pages === 'pages/setRemined/setRemined') return;
					uni.redirectTo({
						url: '../setRemined/setRemined',
					});

				}
				if (index === 3) {
					if (pages === 'pages/highOrder/highOrder') return;
					uni.redirectTo({
						url: '../highOrder/highOrder',
					});
				}
				if (index === 4) {
					// cons
					// console.log(this.userData)
					if (pages === 'pages/BillMessage/BillMessage') return;
					uni.redirectTo({
						url: '../BillMessage/BillMessage',
					});
				}
				this.$emit('click', index);
			}
		}
	}
</script>

<style scoped>
	.tabBarBox {}

	.tabBar {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		padding-bottom: 25rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
		padding-bottom: env(safe-area-inset-bottom);
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-top: 20rpx;
		padding: 0rpx 40rpx;
		justify-content: center;
		width: 100%;
	}

	.nacativeBox {
		position: relative;
		top: -35rpx;
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.nacativeBoxTop {
		/* position: relative; */
		top: -29rpx;
	
	}

	.naimgBoxActive {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 64rpx;
		margin-bottom: 10rpx;
	}
      .naimgBoxTherr{
		  display: flex;
		  justify-content: center;
		  flex-direction: column;
		  align-items: center;
		  margin-top: 57rpx;
		  margin-bottom: 7rpx;
	  }
	.naimgBox {
		width: 80rpx;
		height: 80rpx;
		background: linear-gradient(227deg, #FE7F7F 0%, #E32929 100%);
		box-shadow: 0px 3px 6px rgba(254, 75, 78, 0.38);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 21rpx;
	}
    
	.imgText {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1E252B;
	}

	.icon {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}

	.icon1 {
		width: 40rpx;
		height: 40rpx;
		display: block;
	}

	.icons {
		width: 70rpx;
		height: 86rpx;
		display: block;
		position: relative;
		top: -5rpx;
	}

	.icons1 {
		width: 50rpx;
		height: 66rpx;
		display: block;

	}

	.navigator {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		text-align: center;
		height: 110rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}

	.text,
	.textActive {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(26, 26, 26, 1);
		margin-top: 10rpx;
	}

	.textActive {
		color: #E32929;
	}
</style>
